<template>
  <div class="footer_po_fix">
    <!-- 左侧 -->
    <div class="left item">
      <!-- 图片 -->
      <div @click="handleShowBuyCar" class="img_wrap ">
        <image src="http://121.41.75.32:8002/file/static/shoppingCart.png" class="footer_icon" mode="heightFix" />
        <div class="badge flex a-item j-content">{{ countSum }}</div>
        <text v-if="goodsNum > 0" class="num_badge">{{ goodsNum }}</text>
      </div>
      <!-- 合计 -->
      <div v-if="isStock === '1'" >
        <span>合计：</span>
        <span class="goods_num">￥{{ sumAmount.toFixed(2) }}</span>
      </div>
      <div v-else style="width: 50rpx">

      </div>
    </div>
    <!-- 右侧 -->
    <div class="right item">
      <view>
        <view v-show="ifScan">
          扫码
          <image @click="handleScan" src="http://121.41.75.32:8002/file/static/scancode.png" class="scancode_icon" mode="heightFix" />
        </view>
        <view v-show="ifSubmit">
          提交
          <button @click="handleSubmit" type="primary" class="primary_btn" size="mini">提交</button>
        </view>
      </view>
      <button  @click="handleShowBuyCar" type="primary" class="primary_btn btn_margin" size="mini">确认下单</button>
    </div>
  </div>
</template>

<script>
// 底部合计组件
// import { uniBadge } from '@dcloudio/uni-ui'
export default {
  name: '',
  components: {
    // uniBadge
  },

  props: {
    // 选中商品信息
    selectedGoodsData: {
      type: Object,
      default: {},
    },
    ifScan:{
      type: Boolean,
      default: false
    },
    ifSubmit:{
      type: Boolean,
      default: false
    },
    countSum:{
      type: Number,
      default: 0
    },
    sumAmount:{
      type: Number,
      default: 0
    },
  },
  computed: {
    // 商品数量
    goodsNum() {
      return this.selectedGoodsData.goodsNum
    },
    // 商品价格
    goodsPrice() {
      return this.selectedGoodsData.goodsPrice
    },
  },
  data() {
    return {
      isStock:{}
    }
  },
  mounted() {
    // this.isStock = uni.getStorageSync('appletExtraDict').find(item=>item.code === 't_mobile_order_is_allow_show_stock')
    // console.log('getApp()')
  },
  methods: {
    /**
     * 购物车查看
     * 1. 若无数据则提示选择商品
     */
    handleShowBuyCar() {
      // if (this.selectedGoodsData.goodsNum == 0) return this.uniShowToast('请选择商品')
      this.$emit('EmitShowBuyCar')
    },
    // 扫码
    handleScan() {},
    // 提交数据
    handleSubmit() {
      this.$emit('EmitSubmit')
    },

    // 存值--同步
    storeValue(key, val) {
      // if (typeof key !== 'stirng') return
      // if (typeof val !== 'string') val = JSON.stringify(val)
      // uni.setStorageSync(key, val)
    },
    // 取值--同步
    getValue(key) {
      // if (typeof key !== 'string') key = JSON.stringify(key)
      // return uni.getStorageSync(key)
    },
  },
}
</script>

<style scoped lang="scss">
/* 底部定位 */
.footer_po_fix {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 98rpx;

  display: flex;
  align-items: center;
  .item {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .scancode_icon {
      height: 60rpx;
    }
  }
  .item.right {
    justify-content: space-around;
  }
  .goods_num {
    font-size: 40rpx;
    color: $activeColor;
  }
  .img_wrap {
    position: relative;
    width: 120rpx;
    height: 120rpx;
    .num_badge {
      position: absolute;
      min-width: 40rpx;
      min-height: 40rpx;
      line-height: 40rpx;
      vertical-align: middle;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      top: -40rpx;
      right: 0rpx;
      color: #fff;
      background-color: red;
      font-size: 26rpx;
    }
    .footer_icon {
      height: 80rpx;
      position: absolute;
      margin-top: 20rpx;
      left: 10rpx;
    }
  }

  .primary_btn {
    background-color: $activeColor;
    border-radius: 35rpx;
    margin: 0;
  }
}
.badge{
  width: 35rpx;
  height: 35rpx;
  border-radius: 35rpx;
  background-color: red;
  color: #ffffff;
  font-size: 15rpx;
  position: absolute;
  top: 6rpx;
  left: 60rpx;
}
</style>
